<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Log in</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.5 -->
  <link rel="stylesheet" href="{{asset('/admincss/dist/css/bootstrap.min.css')}}">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{{asset('/admincss/dist/dfonts/font-awesome.min.css')}}">
  <!-- Ionicons -->
  <link rel="stylesheet" href="{{asset('/admincss/dist/dfonts/ionicons.min.css')}}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{{asset('/admincss/dist/css/AdminLTE.min.css')}}">
  <!-- iCheck -->
  <link rel="stylesheet" href="{{asset('/admincss/dist/css/blue.css')}}">
  
  
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body class="hold-transition login-page">
<div class="login-box">
  <div class="login-logo">
    <a href="{{asset('/admincss/index2.html')}}"><b>管理员</b>登录</a>
  </div>
  <!-- /.login-logo -->
  <div class="login-box-body">
    <p class="login-box-msg">后台管理</p>
      <!-- 闪存信息 -->
      @if(session('error'))
        <div class="alert-danger">
            <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
            {{session('error')}}                          
        </div>    
       @endif
    <form action="{{url('/admin/logins/userlogin')}}" method="post">
      <div class="form-group has-feedback">
        <input type="text" class="form-control" name="username" placeholder="账号">
        <span ></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" class="form-control" name="password" placeholder="密码">
        <span ></span>
      </div>
      <div class="row">
        <div class="col-xs-6">
          <div class="checkbox">
            <label>
              <input type="checkbox"> 保存密码
            </label>
          </div>
        </div>
        <div class="col-xs-3 col-xs-offset-3">
          <div class="checkbox" style="width:60px">
              <a href="">找回密码</a>
          </div>    
        </div>
      </div>
      <div class="row">
        <div class="col-xs-4" >
            <input type="text" style="width:70px;" class="form-control" name="codes" placeholder="验证码">
        </div>
        <div class=""  id="mycode">
            <img src="/code" alt="验证码" title="刷新图片" style="margin-left:-32px" width="75" height="34"  border="0">
            <a href="">看不清，换一张</a>　
        </div>
      </div>
        <!-- col -->
        
        <!-- /.col -->
      
    
    <div class="social-auth-links text-center">
      <button type="submit" class="btn btn-block  btn-facebook ">登录</button>
      <button type="reset" class="btn btn-block  bg-orange ">重置</button>
    </div>
    {{ csrf_field() }}
    </form>
  </div>
  <!-- /.login-box-body -->
</div>
<!-- /.login-box -->

<!-- jQuery 2.2.0 -->
<script src="/admincss/js/jQuery-2.2.0.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="/admincss/dist/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="/admincss/js/icheck.min.js"></script>
<script>
  
  //全局变量
    var UserisOk = true;
    var PasswordisOk = true;

    $('input').focus(function(){
        var t = $(this).attr('readmin');
        $(this).parent('div').removeClass('has-error').addClass('has-success').find('span').html(t).css('color','green');
    })

    //用户名丧失焦点
    $('input[name=username]').blur(function(){
        if($(this).val() != '' && $(this).val().length >=6 && $(this).val().length <=18){
                 $(this).parent('div').find('span').html('');
                 UserisOk = true;
        }else{
                $(this).parent('div').addClass('has-error').find('span').css('color','red');
                UserisOk = false;
        }
    })
    //密码验证丧失焦点验证
    $('input[name=password]').blur(function(){
        var reg = /^\w{6,18}$/;
        if(reg.test($(this).val())){
            PasswordisOk = true;
            $(this).parent('div').find('span').html('');
        }else{
            $(this).parent('div').addClass('has-error').find('span').css('color','red');
            PasswordisOk = false;
        }
    })

    //提交事件不能为空
    $('form').submit(function(){
        $('input').trigger('blur');
        if(UserisOk && PasswordisOk){
            return true;
        }else{
            return false;
        }
    })

     //点击更换验证码
        $('#mycode').click(function(){
            var i=$(this);
            $.get('/code',{},function(data){
               $('#mycode').children('img').attr('src',data);
            });

          return false;
        })
    //页面加载完执行验证码    
    $(function()
    {
        $.get('/code',{},function(data){
             $('#mycode').children('img').attr('src',data);
        }); 
    });
    //错误信息显示时间
    $(function(){
            setTimeout(function(){
                $('.alert-danger').hide(1000);
            },2000)
        })
</script>
</body>
</html>
